<template>
  <div id="functional-mode">
    <el-button-group class="btns">
      <el-button size="large" @click="handleWX">
        <i class="iconfont icon-weixing"></i>
        <span>卫星</span>
      </el-button>
      <el-button size="large" @click="handleLK">
        <i class="iconfont icon-Group"></i>
        <span>路况</span>
      </el-button>
      <el-button size="large" @click="handleCJ">
        <i class="iconfont icon-ceju"></i>
        <span>测距</span>
      </el-button>
      <el-button size="large" @click="handleFull">
        <i class="iconfont icon-quanping"></i>
        <span>全屏</span>
      </el-button>
    </el-button-group>
  </div>
  <!-- 路网显示 -->
  <Transition>
    <div class="highway" v-show="highwayId">
      <el-form-item class="way-btn">
        <el-checkbox v-model="highway.data"></el-checkbox>
      </el-form-item>
      <span>路网</span>
    </div>
  </Transition>
</template>
<script setup>
import { inject, watch, onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
// 高德地图API加载
import AMapLoader from '@amap/amap-jsapi-loader';
// 引入地图实例
const { exmap } = inject('ex');

// 全局变量
let AMap;
// 控制路网面板显示id
let highwayId = ref(false);
// 路网图层显示状态id
const highway = ref({
  data: true,
});

onMounted(async () => {
  // 加载器
  window._AMapSecurityConfig = {
    securityJsCode: '3803fef5273a37c33f6c81666572c9c4',
  };
  // 异步加载高德地图API（等待API加载完成后，在创建底图实例map）
  AMap = await AMapLoader.load({
    key: '73e59768fece08c22145999d58cdbb7d',
    version: '2.0',
    //引入的插件列表（与api加载器一同加载⚠️）
    plugins: ['AMap.RangingTool'],
  });
});

// ========================切换卫星图层======================
let WXid = false; /* 点击显隐图层 */
let satellite = ref(null); /* 控制卫星图层实例 */
let roadNet = ref(null); /* 路网图层实例 */
const handleWX = () => {
  if (WXid === false) {
    satellite.value = new AMap.TileLayer.Satellite();
    exmap.value.add(satellite.value);
    // 显隐路网面板
    highwayId.value = true;
    // 初始化路网图层（根据初始值highway.data）
    if (highway.value.data) {
      roadNet.value = new AMap.TileLayer.RoadNet();
      exmap.value.add(roadNet.value);
    }
    // 显隐路网图层
    watch(
      () => highway.value.data, // 监听路径
      (newVal) => {
        console.log('路网显示状态:', newVal);
        // 按钮为假时，隐藏路网图层
        if (!newVal) {
          // 移除路网图层
          exmap.value.remove(roadNet.value);
        } else {
          // 创建路网图层
          roadNet.value = new AMap.TileLayer.RoadNet();
          // 添加路网图层
          exmap.value.add(roadNet.value);
        }
      }
    );
    WXid = true;
  } else {
    exmap.value.remove(satellite.value);
    WXid = false;
    // 显隐路网面板
    highwayId.value = false;
    // 移除路网图层
    exmap.value.remove(roadNet.value);
  }
};

// =========================切换路况图层=================
let LKid = false;
let traffic = ref(null);
const handleLK = () => {
  if (LKid === false) {
    traffic.value = new AMap.TileLayer.Traffic({
      autoRefresh: true, //是否自动刷新
      interval: 180, //刷新间隔，默认180s
    });
    exmap.value.add(traffic.value);
    LKid = true;
  } else {
    exmap.value.remove(traffic.value);
    LKid = false;
  }
};

// ===========================切换全屏==================
const handleFull = () => {
  // 获取地图容器元素
  var container = exmap.value.getContainer();
  // 判断当前是否处于全屏状态
  if (!document.fullscreenElement) {
    // 如果不是全屏状态，则请求进入全屏⚠️
    container.requestFullscreen();
  } else {
    /*  // 如果当前是全屏状态，判断浏览器是否支持退出全屏
    if (document.exitFullscreen) {
      // 退出全屏
      document.exitFullscreen();
    } */
  }
};

// ==========================切换测距工具======================
const mouseTool = ref(null);
// 启动关闭测距工具id
let Cjid = null;
const handleCJ = () => {
  if (Cjid === null) {
    // 消息提示
    ElMessage({
      showClose: true,
      message: '测距功能已开启',
      type: 'success',
    });
    // 初始创建测距工具
    mouseTool.value = new AMap.RangingTool(exmap.value, {
      // 测距线样式
      strokeColor: '#ff3333', // 线条颜色
      strokeOpacity: 1, // 透明度
      strokeWeight: 2, // 线宽
    });
    console.log('初始已创建测距工具');
    // 启动测距绘制，双击自动结束绘制
    mouseTool.value.turnOn();
    // 监听测距结束事件（双击结束）
    /*   mouseTool.value.on('drawend', function () {
    }); */
    Cjid = true;
  } else if (Cjid === true) {
    // 消息提示
    ElMessage({
      showClose: true,
      message: '测距功能已关闭，绘制已清除',
      type: 'error',
    });
    // 关闭测距工具
    Cjid = false;
    stopRanging();
    console.log('已关闭测距工具');
  } else if (Cjid === false) {
    // 消息提示
    ElMessage({
      showClose: true,
      message: '测距功能已开启',
      type: 'success',
    });
    // 重新创建测距工具
    mouseTool.value = new AMap.RangingTool(exmap.value, {
      // 测距线样式
      strokeColor: '#ff3333', // 线条颜色
      strokeOpacity: 1, // 透明度
      strokeWeight: 2, // 线宽
    });
    console.log('已创建测距工具');
    // 启动测距绘制，双击自动结束绘制
    mouseTool.value.turnOn();
    Cjid = true;
  }
};

// 封装关闭测距的逻辑（关键：停止工具+清除绘制内容）
const stopRanging = () => {
  if (mouseTool.value) {
    // 停止测距工具的交互监听,并清除绘制内容
    mouseTool.value.turnOff(true);
    /*     // 移除事件监听（避免内存泄漏）
    mouseTool.value.off('drawend'); */
    // 销毁实例引用
    mouseTool.value = null;
  }
};
</script>

<style lang="scss" scoped>
@import '//at.alicdn.com/t/c/font_4989585_jha1u2nl07o.css';
// 动画
.v-enter-active {
  transition: all 0.3s ease-out; /* 淡入时间和缓动效果 */
}
.v-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1); /* 缩短移出时间至0.2s实现快速移出 */
}
.v-enter-from,
.v-leave-to {
  transform: translateX(20px); /* 将X轴变换改为Y轴变换，实现上下方向动画 */
  opacity: 0;
}

#functional-mode {
  position: absolute;
  top: 20px;
  right: 110px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  .btns {
    .icon-quanping {
      font-size: 21px;
    }
    span {
      margin-left: 10px;
    }
  }
}
.highway {
  position: absolute;
  top: 20px;
  right: 495px;
  background-color: white;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 75px;
  height: 40px;
  border-radius: 5px;
  .way-btn {
    margin-bottom: 0;
  }
  span {
    font-size: 14px;
  }
}
</style>
